<template>
  <a-spin :spinning="tableLoad" size="large">
  <div class="main">
    <div class="main_operation">
      <div class="operation_left">
        <h2 class="mb10" style="font-weight: bold;">当前状态：{{itemDetail.handle_status_name}}</h2>
      </div>
      <div class="operation_right" v-if="itemDetail.handle_status == 0">
      <!-- <div class="operation_right"> -->
					<a-button class="mr10" type="primary" @click="handle">处理</a-button>
					<a-button type="primary" @click="anError">误报</a-button>
      </div>
    </div>
    <div class="userInfo mb10" v-if="itemDetail.handle_status != 0">
      <p>
        处理人：{{itemDetail.handle_user_name}}
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        处理时间：{{itemDetail.handle_time}}
      </p>
      <p class="mt10" v-if="itemDetail.sketch">处理简报：{{itemDetail.sketch}}</p>
    </div>
    <a-form>
      <a-row>
        <a-col :md="12" :xs="24">
          <a-form-item
            label="报警名称:"
            :label-col="{ md: 4 ,xs: 6 }"
            :wrapper-col="{ md: 16 ,xs: 16 }"
          >{{itemDetail.trigger_name}}</a-form-item>
          <a-form-item
            label="所属单位："
            :label-col="{ md: 4 ,xs: 6 }"
            :wrapper-col="{ md: 16 ,xs: 16 }"
          >
          <!-- {{itemDetail.trigger_name}} -->
          该值未接入
          </a-form-item>
          <a-form-item
            label="数据名称："
            :label-col="{ md: 4 ,xs: 6 }"
            :wrapper-col="{ md: 16 ,xs: 16 }"
          >{{itemDetail.register_name}}</a-form-item>
          <a-form-item
            label="报警方式："
            :label-col="{ md: 4 ,xs: 6 }"
            :wrapper-col="{ md: 16 ,xs: 16 }"
          >
            <!-- {{itemDetail.}} -->
            该值未接入
          </a-form-item>
          <a-form-item
            label="报警联系人组："
            :label-col="{ md: 4 ,xs: 6 }"
            :wrapper-col="{ md: 16 ,xs: 16 }"
          >
            该值未接入
            <!-- {{itemDetail.}} -->
          </a-form-item>
        </a-col>
        <a-col :md="12" :xs="24">
          <a-form-item
            label="报警时间："
            :label-col="{ md: 4 ,xs: 6 }"
            :wrapper-col="{ md: 16 ,xs: 16 }"
          >{{itemDetail.alarm_time}}</a-form-item>
          <a-form-item
            label="设备名称："
            :label-col="{ md: 4 ,xs: 6 }"
            :wrapper-col="{ md: 16 ,xs: 16 }"
          >{{itemDetail.equipment_name}}</a-form-item>
          <a-form-item
            label="触发条件："
            :label-col="{ md: 4 ,xs: 6 }"
            :wrapper-col="{ md: 16 ,xs: 16 }"
          >
            <!-- {{itemDetail.}} -->
            该值未接入
          </a-form-item>
        </a-col>
        <a-col :md="24" :xs="24"></a-col>
      </a-row>
      <a-form-item
        label="推送内容："
        :label-col="{ md: 2 ,xs: 6 }"
        :wrapper-col="{ md: 20 ,xs: 16 }"
      >{{itemDetail.content}}</a-form-item>
    </a-form>
  </div>
  <a-modal
      title="报警处理"
      v-model="visible"
      @ok="handleOk"
    >
      <a-form>
        <a-form-item
          required
          label="处理简报"
          :label-col="{ md: 5 ,xs: 24 }"
          :wrapper-col="{ md: 19 ,xs: 24 }"
        >
          <a-textarea v-model="formItem.sketch" placeholder="请输入处理简报" :autosize="{ minRows: 4, maxRows: 6 }" />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-spin>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Add",
  data() {
    return {
      visible: false,
      /* 添加编辑 */
      tableLoad: false, //按钮loading状态
      formItem:{
        id: '',
        sketch: '',
        handle_status: ''
      }
      /* 添加编辑end */
    };
  },
  computed: {
    ...mapState({
      requestCode: state => state.alertRecord.requestCode,
      itemDetail: state => state.alertRecord.itemDetail //详情
    })
  },
  methods: {
    ...mapActions({
      dataDetail: "alertRecord/dataDetail", //详情
      dataEdit: "alertRecord/dataEdit", //详情
    }),
    //重新获取数据
    changeData(){
      this.tableLoad = true
      setTimeout(() => {
        if (this.$route.params.id !== undefined) {
          const id = this.$route.params.id;
          this.dataDetail(id);
        }
        this.tableLoad = false
      }, 1000);
    },
    //处理按钮
    handle(){
      this.visible = true
      this.formItem = {
        id: this.itemDetail.id,
        sketch: '',
        handle_status: '',
      }
    },
    //误报按钮
    anError(){
      const _this = this
      this.formItem.id = this.itemDetail.id;
      this.formItem.handle_status = 2;
      this.formItem.sketch = '';
      this.$confirm({
          title: `误报`,
          content: `请巡查确认为误报在执行该操作！`,
          okText: '确定误报',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            _this.dataEdit(_this.formItem)
            _this.changeData()
          },
        });
    },
    handleOk() {
      if (this.formItem.sketch == '') {
        this.$notification.warning({
          message: '请输入处理简报',
        });
        return null
      }
      this.formItem.handle_status = 1
      this.dataEdit(this.formItem)
      setTimeout(() => {
        if (this.requestCode == 0) {
          this.visible = false
          this.changeData()
        }
      }, 1000);
    }
  },
  mounted() {
    this.changeData()
  }
};
</script>

<style scoped lang="less">
.info {
  border-bottom: 1px solid #ccc;
  padding-left: 10px;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.main {
  padding: 10px;
}
.userInfo {
  background: #f2f2f2;
  padding: 8px;
}
</style>
